<template>
  <div class="pdf">
    <div class="pdf__header">
      <div class="pdf__icon">📄</div>
      <div class="pdf__meta">
        <div class="pdf__name" :title="fileName">{{ fileName }}</div>
        <div class="pdf__sub">{{ fileSizeText }}</div>
      </div>
      <div class="pdf__actions">
        <a :href="safeUrl" download class="btn">下载</a>
      </div>
    </div>
    <div class="pdf__link">
      <a :href="safeUrl" target="_blank" rel="noopener noreferrer" class="pdf__url">
        {{ displayUrl }}
      </a>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { isAllowedUrl, getFileNameFromUrl, formatBytes } from '../utils/url';

const props = defineProps({
  url: { type: String, required: true },
  size: { type: Number, default: undefined },
  inlinePreview: { type: Boolean, default: true }
});

const safeUrl = computed(() => {
  // 对于腾讯云COS等可信域名，直接返回URL
  if (isAllowedUrl(props.url)) {
    return props.url;
  }
  // 如果是相对路径或本地路径，尝试转换为完整URL
  if (props.url.startsWith('/') || props.url.match(/^[a-zA-Z]:\\.*\.pdf$/i)) {
    return props.url;
  }
  return 'about:blank';
});

const fileName = computed(() => {
  const name = getFileNameFromUrl(props.url);
  // 如果文件名是默认值，尝试从URL中提取更有意义的名称
  if (name === '文件.pdf' && props.url.includes('/')) {
    const pathParts = props.url.split('/');
    const lastPart = pathParts[pathParts.length - 1];
    if (lastPart && lastPart.includes('.')) {
      return lastPart;
    }
  }
  return name;
});

const fileSizeText = computed(() => {
  if (props.size) {
    return formatBytes(props.size);
  }
  return '—';
});

const displayUrl = computed(() => {
  try {
    const url = new URL(props.url);
    // 对于腾讯云COS，显示简化的域名
    if (url.hostname.includes('cos.ap-shanghai.myqcloud.com')) {
      return `${url.pathname.split('/').pop()}`;
    }
    return url.hostname + url.pathname;
  } catch (_) {
    return props.url || '';
  }
});

const showInlinePreview = computed(() => {
  return props.inlinePreview && isAllowedUrl(props.url);
});
</script>

<style scoped>
.pdf { border: 1px solid var(--border-color); border-radius: 12px; background: #fff; margin: 8px 0; }
.pdf__header { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; }
.pdf__icon { width: 28px; height: 28px; display: grid; place-items: center; font-size: 18px; background: #eef2ff; border-radius: 6px; }
.pdf__name { font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf__sub { font-size: 12px; color: var(--text-secondary); }
.pdf__link { padding: 0 12px 8px; font-size: 12px; }
.pdf__url { color: #2563eb; word-break: break-all; text-decoration: none; display: inline-block; padding: 4px 8px; background: #f8fafc; border-radius: 4px; border: 1px solid #e2e8f0; }
.pdf__url:hover { background: #f1f5f9; border-color: #cbd5e1; }
.btn { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: #111827; color: #fff; text-decoration: none; font-size: 12px; transition: all 0.2s; }
.btn:hover { opacity: 0.9; transform: translateY(-1px); }
.btn--ghost { background: #fff; color: #111827; }
</style>

